<!--
 * @Author: wangming
 * @Date: 2020-09-17 10:09:01
 * @LastEditors: wangming
 * @LastEditTime: 2022-06-13 16:58:19
 * @Description: file content
-->
<template>
  <div>
    <div class="imgbox dib rel" v-for="(i, index) in fileList" :key="index">
      <div class="abs drawbg ks-row-middle-center">
        <i class="el-icon-view mr10 wh poi f18 b" @click.stop="previewImageLayout(index)"></i>
        <i v-if="!disabled && !viewInfo" class="iconfont iconicon_shanchu poi wh f18 b"
          @click.stop="deleteFile(index)"></i>
      </div>
      <el-image fit="cover" :src="getPath(i.path, rootPath)" class="poi"></el-image>
    </div>
    <common-upload :beforeUpload="beforeUpload" v-if="
    fileList.length < config.__config.maxLength && !disabled && !viewInfo" @successForName="handleUploadSuccess"
      class="dib" :multiple="config.__config.multiple" :size="config.__config.size" :accept="accept">
      <div class="uploader dib">
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </div>
    </common-upload>
  </div>
</template>
<script>
import myMixin from "@/pageComponents/myMixin";
import vmMixin from "@/pageComponents/vmMixin";
import { getBasePath } from "@/config/api.config";
import imageLayout from "@/components/Imagepreview/index";
import { getHmhttpserviceServerurlByKey } from '@/apis/paas/HmHttpServiceController.js'
export default {
  mixins: [myMixin, vmMixin],
  computed: {
    accept() {
      if (this.config.__config?.accept) {
        return (
          this.config.__config?.accept?.split(",").map((i) => "." + i) + ""
        );
      } else {
        return "image/*";
      }
    },
  },
  data() {
    return {
      fileList: [],
      rootPath: '',
    };
  },
  async created() {
    let { servekey: key } = this.config.__config
    if (!!key && process.env.VUE_APP_ROOT_URL === './') {
      this.rootPath = await getHmhttpserviceServerurlByKey({ key })
    }
  },
  watch: {
    value: {
      handler: function (value) {
        if (value) {
          try {
            this.fileList = JSON.parse(value);
          } catch (error) {
            this.fileList = value.split(",").map((i) => ({ name: i, path: i }));
          }
        } else {
          this.fileList = [];
        }
      },
      immediate: true,
    },
  },
  methods: {
    getPath(path, rootPath) {
      let fullpath = '/extimg' + path.split('/extimg').pop()
      if (!!rootPath) {
        return rootPath + fullpath
      } else {
        return getBasePath(fullpath)
      }
    },
    previewImageLayout(imageIndex) {
      let previewSrcList = this.fileList.map((i) => this.getPath(i.path, this.rootPath));
      imageLayout.preview({ previewSrcList, imageIndex });
    },
    beforeUpload(file) {
      const type = file.name.replaceAll(" ", "").match(/\.[A-Za-z0-9]+$/)[0];
      if (
        (this.accept.indexOf(type) > -1 || !this.config.__config?.accept) &&
        /^image\//.test(file.type)
      ) {
        return true;
      } else {
        this.$message.error(`格式不正确`);
        return false;
      }
    },
    handleUploadSuccess(src) {
      let { path, name } = src;
      this.fileList.push({ path, name });
      this.$emit("input", JSON.stringify(this.fileList));
      this.runEventName("afterupload", { values: src });
    },
    deleteFile(index) {
      const file = this.fileList[index].path
      this.fileList.splice(index, 1);
      this.$emit("input", JSON.stringify(this.fileList));
      this.runEventName("afterdelete", { values: {
        file,
        fileList: JSON.stringify(this.fileList),
      }});
    },
  },
};
</script>

<style lang="scss" scoped>
.uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.imgbox {
  width: 100px;
  height: 100px;
  border: 1px solid #f1f1f1;
  margin-right: 12px;

  .el-image {
    width: 100%;
    height: 100%;
  }

  &>img {
    right: -6px;
    top: -6px;
    z-index: 99;
  }

  .drawbg {
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
  }

  &:hover .drawbg {
    display: flex;
  }
}
</style>
